import {
  LockOutlined,
  UserOutlined,
} from '@ant-design/icons';
import {
  LoginFormPage,
  ProConfigProvider,
  ProFormText,
} from '@ant-design/pro-components';
import { Button, Tabs, theme, message } from 'antd'
import { useState,useEffect } from 'react'
import { getCapcha,login } from '@/service/index'

type LoginType = 'student' | 'teacher';


const Page = () => {
  const [loginType, setLoginType] = useState<LoginType>('student');
  const { token } = theme.useToken();

  const [captcha, setCaptcha] = useState<string | null>(null)


  const getCaptchaImg = async () => {
    try {
      const res = await getCapcha()
      setCaptcha(res.data.data.code)
    } catch (e) {
      console.log(e)
    }
  }

  useEffect(() => {
    getCaptchaImg()
  },[])

  const onFinish = async (data:{username:string,password:string,code:string}) => {
    try {
      const res = await login(data)
      if(res.data.code === 0){
        message.success('登录成功')
        localStorage.setItem('token',res.data.data.token)
        console.log(res.data)
        window.location.href='/'
      } else if (res.data.code === 1005) {
        message.error('验证码错误')
        getCaptchaImg()
      } else {
        message.error(res.data.msg) 
      }
    } catch (e) {
      message.error(e as string)
    }
  }
  return (
    <div
      style={{
        backgroundColor: 'white',
        height: '100vh'
      }}
    >
      <LoginFormPage
        onFinish={onFinish}
        backgroundImageUrl="https://mdn.alipayobjects.com/huamei_gcee1x/afts/img/A*y0ZTS6WLwvgAAAAAAAAAAAAADml6AQ/fmt.webp"
        logo="https://p9-flow-imagex-sign.byteimg.com/ocean-cloud-tos/image_skill/ed408ad8-0244-4fa4-952c-fa278801f9e7_1744113005562403128_origin~tplv-a9rns2rl98-web-thumb-avif.avif?rk3s=b14c611d&x-expires=1775649005&x-signature=a6GgVFpmmY9YAjPXsyFN60kOKfo%3D"
        backgroundVideoUrl="https://gw.alipayobjects.com/v/huamei_gcee1x/afts/video/jXRBRK_VAwoAAAAAAAAAAAAAK4eUAQBr"
        title={loginType==='student'?"OnlineExam":"OnlineExamManage"}
        containerStyle={{
          width: '500px',
          backgroundColor: 'rgba(0, 0, 0,0.65)',
          backdropFilter: 'blur(4px)',
        }}
        subTitle={loginType==='student'?"在线考试平台":"在线考试管理平台"}
        activityConfig={{
          style: {
            boxShadow: '0px 0px 8px rgba(0, 0, 0, 0.2)',
            color: token.colorTextHeading,
            borderRadius: 8,
            backgroundColor: 'rgba(255,255,255,0.25)',
            backdropFilter: 'blur(4px)',
          },
          title: '活动标题，可配置图片',
          subTitle: '活动介绍说明文字',
          action: (
            <Button
              size="large"
              style={{
                borderRadius: 20,
                background: token.colorBgElevated,
                color: token.colorPrimary,
                width: 120,
              }}
            >
              去看看
            </Button>
          ),
        }}
      >
        <Tabs
          centered
          activeKey={loginType}
          onChange={(activeKey) => setLoginType(activeKey as LoginType)}
        >
          <Tabs.TabPane key={'student'} tab={'我是学生'} />
          <Tabs.TabPane key={'teacher'} tab={'我是老师'} />
        </Tabs>
        {loginType === 'student' && (
          <>
            <ProFormText
              name="username"
              fieldProps={{
                size: 'large',
                prefix: (
                  <UserOutlined
                    style={{
                      color: token.colorText,
                    }}
                    className={'prefixIcon'}
                  />
                ),
              }}
              placeholder={'用户名'}
              rules={[
                {
                  required: true,
                  message: '请输入用户名!',
                },
              ]}
            />
            <ProFormText.Password
              name="password"
              fieldProps={{
                size: 'large',
                prefix: (
                  <LockOutlined
                    style={{
                      color: token.colorText,
                    }}
                    className={'prefixIcon'}
                  />
                ),
              }}
              placeholder={'密码'}
              rules={[
                {
                  required: true,
                  message: '请输入密码！',
                },
              ]}
            />
            <div style={{display:'flex', alignItems:'flex-start'}}>
              <ProFormText
                name="code"
                fieldProps={{
                  size: 'large',
                  prefix: (
                    <LockOutlined
                      style={{
                        color: token.colorText,
                      }}
                      className={'prefixIcon'}
                    />
                  ),
                }}
                placeholder={'验证码'}
                rules={[
                  {
                    required: true,
                    message: '请输入验证码!',
                  },
                ]}
              />
              <img style={{marginLeft:'10px'}} src={captcha as string} alt="" onClick={()=>{getCaptchaImg()}}/>
            </div>
          </>
        )}
        {loginType === 'teacher' && (
          <>
            <ProFormText
              name="username"
              fieldProps={{
                size: 'large',
                prefix: (
                  <UserOutlined
                    style={{
                      color: token.colorText,
                    }}
                    className={'prefixIcon'}
                  />
                ),
              }}
              placeholder={'用户名'}
              rules={[
                {
                  required: true,
                  message: '请输入用户名!',
                },
              ]}
            />
            <ProFormText.Password
              name="password"
              fieldProps={{
                size: 'large',
                prefix: (
                  <LockOutlined
                    style={{
                      color: token.colorText,
                    }}
                    className={'prefixIcon'}
                  />
                ),
              }}
              placeholder={'密码'}
              rules={[
                {
                  required: true,
                  message: '请输入密码！',
                },
              ]}
            />
            <div style={{display:'flex', alignItems:'flex-start'}}>
              <ProFormText
                name="code"
                fieldProps={{
                  size: 'large',
                  prefix: (
                    <LockOutlined
                      style={{
                        color: token.colorText,
                      }}
                      className={'prefixIcon'}
                    />
                  ),
                }}
                placeholder={'验证码'}
                rules={[
                  {
                    required: true,
                    message: '请输入验证码!',
                  },
                ]}
              />
              <img style={{marginLeft:'10px'}} src={captcha as string} alt="" onClick={()=>{getCaptchaImg()}}/>
            </div>
          </>
        )}
      </LoginFormPage>
    </div>
  );
};

export default () => {
  return (
    <ProConfigProvider dark>
      <Page />
    </ProConfigProvider>
  );
};